<template>
	<view class="page" style="background-color: white;">
		<custom-navigation title="打印商品标签">
		</custom-navigation>
		<scroll-view class="body-scroll" scroll-y="true">
			<view class="item flex-row-center">
				<view class="title">打印模板：</view>
				<view class="value">商品标签 </view>
			</view>
			<!-- 			<picker :value="deviceIndex" :range="deviceNames" @change="e=>deviceIndex = e.detail.value">
				<view class="item flex-row-center">
					<view class="title">选择打印机：</view>
					<view class="value flex-row-center"> {{deviceNames[deviceIndex]||'请选择打印机'}}
						<image src="/static//arrow-bottom2.png" mode="widthFix">
						</image>
					</view>
				</view>
			</picker> -->
			<picker :value="lindex" :range="lnums" @change="e=>lindex = e.detail.value">
				<view class="item flex-row-center">
					<view class="title">订单打印联数：</view>
					<view class="value flex-row-center">
						<view style="min-width: 200rpx;">{{lnums[lindex]}}</view>
						<image src="/static//arrow-bottom2.png" mode="widthFix"></image>
					</view>
				</view>
			</picker>
			<view class="item flex-row-center">
				<view class="title">商品标签预览模板：</view>

			</view>
			<view v-for="(item,index) in print_goods_list">
				<view class="preview flex-column-center">
					<view class="name">品名：{{item.goods_name}}</view>
					<!-- <view class="name">规格：{{item.specifications}}</view> -->
					<view class="name">售价：{{item.sale_price}}元</view>
					<view class="qrcode"></view>
				</view>
			</view>

		</scroll-view>
		<view class="bottom-container flex-row-center">
			<view class="item2" @click="back">取消</view>
			<view class="item1" @click="toPrint()">确认打印</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceList: [],
				deviceNames: [],
				deviceIndex: -1,
				lnums: ['1张', '2张', '3张', '4张', '5张', '6张', '7张', '8张'],
				lindex: 0,
				print_goods_no_list: []
			}
		},

		onLoad() {
			// this.getDeviceList()
			this.print_goods_no_list = uni.getStorageSync("print_goods_no_list")
			this.print_goods_list = uni.getStorageSync("print_goods_list")
			uni.setStorageSync("print_goods_no_list", null)
			uni.setStorageSync("print_goods_list", null)
		},
		methods: {

			back() {
				uni.navigateBack()
			},
			getDeviceList() {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/select/srvdev_device_printer_select", {
					"serviceName": "srvdev_device_printer_select",
					"colNames": [
						"*"
					],
					"page": {
						"pageNo": 1,
						"rownumber": 110
					}
				}).then(res => {
					this.deviceList = res.data;
					let names = []
					for (let i in this.deviceList) {
						names.push(this.deviceList[i].device_name)
					}
					this.deviceNames = names
					uni.hideLoading()
				})
			},

			toPrint() {
				uni.showLoading({
					title: "提交中..."
				})

				let no = "";
				for (let i in this.print_goods_no_list) {
					no = no + "," + this.print_goods_no_list[i]
				}
				this.$apiPost("/retail/operate/srvsys_label_print", [{
					"serviceName": "srvsys_label_print",
					"data": [{
						"goods_no": no.substring(1)
					}]
				}]).then(res => {
					uni.hideLoading()
					if (res.state == 'SUCCESS') {
						uni.setStorageSync("refresh", true)
						if (res.state == "SUCCESS") {
							this.$showToast("提交成功")
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.item {
		margin-top: 60rpx;
		margin-left: 24rpx;

		.title {
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(102, 102, 102, 1);
			text-align: left;
			vertical-align: top;
		}

		.value {
			height: 80rpx;

			line-height: 80rpx;
			border-radius: 12rpx;
			padding: 0 54rpx;
			border: 2rpx solid rgba(153, 153, 153, 1);
			box-sizing: content-box;

			image {

				margin-left: 50rpx;
				width: 40rpx;
				height: 10rpx;
			}

		}
	}

	.preview {
		margin-top: 14rpx;
		margin-left: 24rpx;
		padding-top: 30rpx;
		width: 702rpx;
		border: 2rpx solid rgba(153, 153, 153, 1);

		.name {
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(102, 102, 102, 1);
		}

		.qrcode {
			margin-bottom: 20rpx;
			width: 472rpx;
			height: 244rpx;
			background: url(https://img.js.design/assets/img/636d13cdef439e62ddee10a8.png#7180a265c6bb217d4d8124e66e7240ec);
			background-size: 100% 100%;
		}
	}

	.bottom-container {
		background-color: white;
		box-shadow: 0 -16rpx 16rpx 1rpx #00000008;
		height: 146rpx;
		padding: 0 24rpx;
		justify-content: space-around;

		.item2 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #333333FF;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;

		}

		.item1 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid rgba(56, 192, 158, 1);
			background-color: rgba(56, 192, 158, 1);
			color: white;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.text {
			flex: 1;
			margin-left: 60rpx;
			font-size: 30rpx;
			font-weight: 700;

		}

		.btn {
			margin-right: 34rpx;
			width: 192rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(56, 192, 158, 1);
			font-size: 30rpx;
			font-weight: 700;
			color: white;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>
